<template>
  <ListTable
    @getData="handleCallback"
    v-model="columns"
    :total
    :dataList="dynamicList"
    placeholder="发表者"
  >
    <template #select>
      <n-select
        clearable
        placeholder="审核状态"
        v-model:value="selectStatus"
        :options="statusOptions"
      />
    </template>
  </ListTable>

  <DetailModel v-model="detailVisible" :data="detailData" @getData="getData" />
</template>

<script setup lang="ts">
import { createVNode } from 'vue'
import { getDynamicList } from '@/api'
import { mapToLabelValue, updateParams, dbTimeToTime } from '@/utils'
import { PARAMS, AUDIT_STATUS } from '@/constant'
import { NButton, NTag } from 'naive-ui'

import DetailModel from './components/DetailModel.vue'
import ListTable from '@/components/ListTable.vue'

const message = useMessage()

let params = PARAMS

const statusOptions = mapToLabelValue(AUDIT_STATUS)
const selectStatus = ref(null)

watch(selectStatus, async val => {
  params = updateParams(params, 'status', val && +val)
  await getData(params)
})

const total = ref(0)
const dynamicList = ref([])
const getData = async (
  params = {
    pageNum: 1,
    pageSize: 10
  }
) => {
  const { total: count, list } = await getDynamicList(params)
  total.value = count
  dynamicList.value = list
}

await getData()

const detailVisible = ref(false)
const detailData = ref(null)
const getDynamicDetail = async row => {
  detailData.value = row
  detailVisible.value = true
}

const createColumns = (): DataTableColumns<any> => {
  return [
    {
      title: '#',
      render(row, index) {
        return index
      }
    },
    {
      title: '发表者',
      ellipsis: {
        tooltip: true
      },
      render(row) {
        return row.username
      }
    },
    {
      title: '文字内容',
      ellipsis: {
        tooltip: true
      },
      render(row) {
        return row.content
      }
    },
    {
      title: '发表时间',
      sortOrder: false,
      sorter: 'default',
      ellipsis: {
        tooltip: true
      },
      render(row) {
        return dbTimeToTime(row.createdAt)
      }
    },
    {
      title: '审核状态',
      render(row) {
        const tag = ['warning', 'success', 'error']
        return createVNode(
          NTag,
          {
            size: 'small',
            bordered: false,
            type: tag[row.status]
          },
          () => AUDIT_STATUS[row.status]
        )
      }
    },
    {
      title: '操作',
      render(row) {
        return createVNode(
          NButton,
          {
            text: true,
            type: 'primary',
            onClick: () => getDynamicDetail(row)
          },
          () => '详情'
        )
      }
    }
  ]
}
const columns = ref(createColumns())

const handleCallback = async (val: any) => {
  params.pageNum = val.pageNum
  params = updateParams(params, 'username', val.keyword)
  params = updateParams(params, 'sort', val.sorter && val.sorter.slice(0, -3))
  await getData(params)
}
</script>

<style scoped lang="scss"></style>
